<template>
  <div class="new">
    <div class="card-top">
      <span type="text" class="el-btn" :class="[isColor ? 'e82e' : '']" @click="handleRead">全部置为已读</span>
    </div>
    <div class="card-bottom">
      <div class="main">
        <div class="left" v-for="item in messageList" :key="item.id">
          <div class="title">
            <div class="badge" v-if="item.isRead == 0"></div>
            <div v-else></div>
          </div>
          <div class="item">
            <span class="content">{{ item.content }}</span>
            <span class="createTime">{{ item.createTime }}</span>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total.sync="total"
      :page.sync="pageNo"
      :limit.sync="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout=" total,sizes,prev, pager, next, jumper"
      @pagination="handleMessage"
    ></pagination>
  </div>
</template>

<script>
import { getMessage, readAll } from "@/api/message.js";
import Pagination from "@/components/Pagination";
export default {
  name: "news",
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 20,
      messageList: [],
      isColor: false
    };
  },
  components: {
    Pagination,
  },
  mounted() {
    this.handleMessage();
  },
  methods: {
    handleMessage() {
      let params = { pageNo: this.pageNo, pageSize: this.pageSize };
      getMessage(params).then((res) => {
        if (res.code == 200) {
          this.total = res.result.total;

          res.result.list.length && res.result.list.forEach((item)=>{
            if (item.isRead == 0) {
              this.isColor = true;
            }
          })
          this.messageList = res.result.list;
        } else {
          this.total = 0;
          this.messageList = [];
        }
      });
    },
    handleRead() {
      readAll().then((res) => {
        if (res.success) {
          for (var i = 0; i < this.messageList.length; i++) {
            if (this.messageList[i].isRead == 0) {
              this.messageList[i].isRead = 1;
              this.isColor = false;
            }
          }
          this.pageNo = 1;
          this.pageSize = 20;
          this.handleMessage();
          this.$store.dispatch("sidebars/getActionMessageUnReadTotal");
          this.$store.dispatch("navbars/getActionMessageUnReadTotal");
        }
      });
    },
    // handleSee() {
    //   this.$router.push("/newsDetail");
    // },
  },
};
</script>

<style lang="scss" scoped>
.new {
  height: calc(100% - 19px);
  .card-top {
    margin: 10px 0;
    height: 40px;
    background: #f3f5ff;
    border-radius: 2px;
    .e82e {
      color: #2348e8 !important;
    }
    .el-btn {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      line-height: 40px;
      float: left;
      margin-left: 19px;
      cursor: pointer;
    }
  }
  .card-bottom {
    height: calc(100% - 124px);
    padding: 20px 30px 26px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    .main {
      height: calc(100% - 60px);
      .left {
        .title {
          float: left;
          margin-right: 5px;
          .badge {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-left: 6px;
            background: #e02020;
            margin-top: 6px;
          }
        }
        .item {
          display: flex;
          justify-content: space-between;
          .content {
            color: #1a2035;
            font-size: 12px;
          }
          .createTime {
            color: #1a2035;
            font-size: 12px;
          }
        }
      }
    }
  }
  .el-divider--horizontal {
    margin: 15px 0 !important;
  }
}
</style>